<template>
	<view>
		<cu-custom style="height: 0px;" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">工单评价</block>
		</cu-custom>
		<view class="content">
			<view class="each">
				<view class="repairType">打分</view>
				<view class="repairBox personBox">
					<u-rate :count="count" v-model="value" size="50" @change="reteOnChange"></u-rate>
				</view>
			</view>
			<view class="each">
				<view class="repairType">评论内容</view>
				<view class="repairBox personBox">
					<view class="uni-textarea" style="width: 100%;">
						<textarea v-model="CommentContent" placeholder="请输入评价" style="text-align: left;padding: 10rpx;width: 100%;"/>
					</view>
				</view>
			</view>
			
			<view class="publish-goods-wrap">
				<view class="publish-goods-btn" @click="sub">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
    data() {
        return {
			id:0,
			count: 5,
			value: 0,
			CommentContent:''
		};
    },
	onLoad(option) {
		this.id=option.id
	},
    methods: {
		reteOnChange(e){
			let that=this
			console.log('rate发生改变:' + JSON.stringify(e))
			if(e>=1&&e<=3){
				that.CommentContent='一般'
			}
			if(e==4){
				that.CommentContent='维修小哥很专业,态度很棒,好评！'
			}
			if(e==5){
				that.CommentContent='快速、高效、专业，这次的工单服务非常棒!'
			}
		},
		// 提交表单
		sub() {
			let that=this
			if(that.value==0){
				uni.showToast({ title:'请打分', icon: 'none' });
				return false;
			}
			uni.showLoading({
				title: '提交中...'
			})
			//加载人员数据
			let opts = {
				url: 'api/CommentQrcodeScene',
				method: 'get'
			};
			let requestData={
				Id:that.id,
				CommentRate:that.value,
				CommentContent:that.CommentContent
			}
			request.httpTokenRequest(opts,requestData).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					uni.showToast({ title:'评论成功', icon: 'none' });
					setTimeout(() => {
						 uni.reLaunch({
							url: '/pages/index/tabbar?PageCur='+'index'
						 });
					}, 1000)
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30rpx;
}


.each{
	width: 100%;
	margin-bottom: 10rpx;
}
.repairBox{
	margin:0 auto;
}
.repairType{
	border-radius:16rpx 16rpx 0 0;
	box-sizing: border-box;
	width: 94%;
	margin: 0 3%;
	background-color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 25rpx;
	font-weight: 700;
	font-size: 30rpx;
	border-bottom:1px solid rgba(242, 242, 242, 1)
}
.repairBox{
	border-radius: 0 0 16rpx 16rpx;
	box-sizing: border-box;
	width: 94%;
	//margin: 0 3% 0rpx 3%;
	padding: 25rpx ;
	background-color: #fff;
	display: flex;
	justify-content: space-around;//实现水平方向均匀布局，space-between水平靠左靠右
	text-align: center;
	.selectType{
		width: 26%;
		height: 60rpx;
		line-height: 60rpx;
		color: #409eff;
		background-color: #f6faff;
		border:1px solid rgba(160, 207, 255, 1);
		border-radius: 5px;
	}
	.eachType{
		width: 26%;
		height: 60rpx;
		line-height: 60rpx;
		color: #999999;
		background-color: #fff;
		border:1px solid rgb(233, 233, 233);
		border-radius: 5px;
		font-size: 26rpx;
	}
}

	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.publish-goods-btn {
		margin: 24rpx;
		background: #0079FE;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}

	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
</style>